<template>
  <div>
    <input type="file" style="display: none" id="fileinput" />
    <el-button type="success" @click="selectFile">选择文件</el-button>
    <span>{{ file ? file.name : "" }}</span>
    <div class="image-style">
      <img :src="imgurl" alt="" />
    </div>
    <p v-show="imgurl">图片地址：{{ imgurl }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import http from "axios";
// 文件选择框
let fileinput = ref(null);
// 存放文件
let file = ref(null);
// 图片地址
let imgurl = ref(null);

// 选择文件方法
function selectFile() {
  fileinput.value = document.getElementById("fileinput");
  fileinput.value.click();
  // 文件选中时触发
  fileinput.value.addEventListener("change", () => {
    // 获取到选择的文件
    file.value = fileinput.value.files[0];
    // 执行上传方法
    uploadFile(file.value);
  });
}
// 执行上传方法
function uploadFile(file) {
  console.log(file);
  const forms = new FormData();
  forms.append("file", file);
  const configs = {
    baseURL: "/nodeapi",
    // 设置请求头，表示本次传递的数据为文件
    headers: { "Content-Type": "multipart/form-data" },
  };
  http.post("/uploadfile", forms, configs).then((res) => {
    console.log(res);
    imgurl.value = res.data.url;
  });
}
</script>

<style lang="scss">
.image-style {
  width: 500px;
  img {
    width: 100%;
  }
}
</style>